<!DOCTYPE html>
<style>
  .container {
    width: 400px;
    height: 100px;
    background: #DDD;
    position: relative;
  }

  .item {
    width: 100px;
    height: 100px;
    background: #09F;
    left: 10%;
    position: absolute;
  }
</style>
<script src="../../../resources/js-test.js"></script>
<div class="container">
  <div class="item">
  </div>
</div>
<script>
  description("Blue item box is 10% left in container. Box should display 40px as getComputedStyle( item ).left should return 40px (400px * 10%)");
  var item = document.querySelector('.item');
  var computedStyle = window.getComputedStyle(item);
  shouldBe("computedStyle.getPropertyValue('left')", "'40px'");
</script>
